<template>
	<div>

		<el-dialog title="参数修改" :visible.sync="updateModelVisible">
			<el-form label-width="100px">
				<el-form-item label="编号">
					<el-input v-model="updatePropGroupInfo.goodsPropgroupId" placeholder="请输入内容" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="属性名">
					<el-input v-model="updatePropGroupInfo.goodsPropgroupName" placeholder="请输入内容">
					</el-input>
				</el-form-item>

				<el-form-item label="属性">
					<el-radio-group v-model="updatePropGroupInfo.goodsPropgroupStatus">
						<el-radio :label="0">启用</el-radio>
						<el-radio :label="1">停用</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="属性">


					<el-select v-model="updatePropGroupInfo.goodsSmallerId" placeholder="请选择">
						<el-option v-for="item in listGoodsSmaller" :key="item.key" :label="item.label"
							:value="item.key">
						</el-option>
					</el-select>
				</el-form-item>



			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="updateGoodsPropGroupInfo">修改</el-button>
			</div>
		</el-dialog>




		<el-dialog title="新增属性组" :visible.sync="isAddVisible">
			<el-form label-width="100px">
				<el-form label-width="100px">

					<el-form-item label="属性名">
						<el-input v-model="savePropGroupInfo.goodsPropgroupName" placeholder="请输入内容">
						</el-input>
					</el-form-item>

					<el-form-item label="属性">
						<el-radio-group v-model="savePropGroupInfo.goodsPropgroupStatus">
							<el-radio :label="0">启用</el-radio>
							<el-radio :label="1">停用</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="属性">
						<el-transfer v-model="savePropGroupInfo.goodsSmallerIds" :data="listGoodsSmaller"
							:titles="['待选三级类','已选三级类']" :button-texts="['', '']">
						</el-transfer>
					</el-form-item>
				</el-form>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="clearAddForm">重置</el-button>
				<el-button type="primary" @click="addPropGroup">添加</el-button>
			</div>
		</el-dialog>










		<div id="">


			<div class="searchWord">

				<el-form :inline="true" class="demo-form-inline">

					<el-form-item label="模糊条件">
						<el-input v-model="findParam.queryCriteria" style="width: 300px;" class='searchs'
							placeholder="请输入搜索内容">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" round @click="search()">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" plain @click="oppenPropGroupModel()">新增属性组</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" icon="el-icon-delete" circle :disabled="this.deleIds.length === 0"
							@click="deletePropGrop"></el-button>
					</el-form-item>
				</el-form>

			</div>






			<el-table :data="propGroups" style="width: 100%" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="goodsPropgroupId" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="goodsPropgroupName" label="属性名" width="180">
				</el-table-column>
				<el-table-column prop="goodsSmallerName" label="适用三级类" width="180">
				</el-table-column>
				<el-table-column prop="goodsPropgroupNum" label="属性数量" width="180">
				</el-table-column>
				<el-table-column sortable label="状态" width="180">
					<template slot-scope="scope">
						{{ scope.row.goodsPropgroupStatus == 1 ? '停用' : '启用' }}
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="300">
					<template slot-scope="scope">
						<el-button type="warning" plain @click="routerPush(scope)">参数列表</el-button>
						<el-button type="warning" plain @click="openUpdateModel(scope)">修改</el-button>

					</template>

				</el-table-column>
			</el-table>
		</div>
		<div id="">
			<el-pagination :current-change="findParam.indexPage" background layout="sizes,prev, pager, next, jumper"
				:total="total" :page-sizes="size" :page-size="findParam.pageSize" @current-change="changePage"
				@size-change="changePageSize">
			</el-pagination>


		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				updateModelVisible: false,
				isAddVisible: false,
				savePropGroupInfo: {
					goodsPropgroupName: null,
					goodsPropgroupStatus: null,
					goodsSmallerIds: []
				},
				findParam: {
					queryCriteria: null,
					indexPage: 1, //当前页码
					pageSize: 5, //当前页码能看几条
					// 给他一个默认值可以修改
				},
				propGroups: [],
				total: 0,
				size: [3, 5, 10, 20, 30],
				addModel: false,
				checks: [],

				addrolesMenus: {
					roleId: null,
					checkIds: []
				},
				deleIds: [],
				updatePropGroupInfo: [],
				listGoodsSmaller: []
			}

		},
		methods: {
			routerPush(scope) {
				localStorage.setItem("goodsPropgroupId", scope.row.goodsPropgroupId);
				this.$router.push("/main/goodsProp")
			},
			updateGoodsPropGroupInfo() {
				this.$http.post('/goods-propgroup/updateGoodsPropGroup.do', this.updatePropGroupInfo)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '修改成功 '
							});
							this.ListPropGroup();
							this.updateModelVisible = false;

							//初始化勾选
							// this.dele.ids = [];

							this.updateRole = [];
						} else {
							this.$message({
								type: 'error',
								message: '修改失败 ' + resp.data.msg
							});
						}

					})



			},
			openUpdateModel(scope) {
				//获取最新的scope
				this.listGoodsSmallAxios();
				this.updateModelVisible = true;


				this.$http.get("/goods-propgroup/findGoodsPropGroupById/" + scope.row.goodsPropgroupId).then(resp => {
					if (resp.data.code == 200) {
						let obj = resp.data.data;
						this.updatePropGroupInfo = resp.data.data;

					} else {
						this.$message({
							type: 'error',
							message: '查询数据失败 '
						});

					}
				})


			},
			clearAddForm() {
				this.savePropGroupInfo = {
					goodsPropgroupName: null,
					goodsPropgroupStatus: null,
					goodsSmallerIds: []
				}
			},
			addPropGroup() {
				// console.log(this.savePropGroupInfo)
				this.$http.post('/goods-propgroup/saveGoodsPropGroups.do', this.savePropGroupInfo)
					.then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								type: 'success',
								message: '添加成功 '
							});
							this.isAddVisible = false;
							this.ListPropGroup();
							// this.dele.ids = [];
							this.clearAddForm()
						} else {
							this.$message({
								type: 'error',
								message: '添加失败 ' + resp.data.msg
							});

						}

					})
			},
			oppenPropGroupModel() {

				this.listGoodsSmallAxios();
				this.isAddVisible = true;
			},
			listGoodsSmallAxios() {
				this.$http.post('/goods-propgroup/listGoodsSmaller.do')
					.then(resp => {
						if (resp.data.code == 200) {
							this.listGoodsSmaller = [];
							for (var i = 0; i < resp.data.data.length; i++) {

								this.listGoodsSmaller.push({
									key: resp.data.data[i].goodsSmallerId,
									label: resp.data.data[i].goodsSmallerName
								})
							}


						} else {
							this.$message({
								type: 'error',
								message: '获取三级类失败 '
							});
						}

					})
			},
			handleSelectionChange(val) {
				//获取勾选的内容

				//初始化
				this.deleIds = [];
				for (let i = 0; i < val.length; i++) {
					this.deleIds.push(val[i].goodsPropgroupId);
				}
			},
			deletePropGrop() {
				this.$http.post('/goods-propgroup/removePropGroupByIds.do', this.deleIds)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '删除成功 '
							});
							this.ListPropGroup();
							//初始化勾选
							// this.deleIds = [];
						} else {
							this.$message({
								type: 'error',
								message: '删除失败 ' + resp.data.msg
							});
						}

					})
			},
			search() {
				this.ListPropGroup();
			},
			//加载所有属性组
			ListPropGroup() {
				this.$http.post("/goods-propgroup/listGoodsPropGroup.do", this.findParam)
					.then(resp => {
						if (resp.data.code == 200) {
							this.deleIds = [];

							this.propGroups = resp.data.data.list;
							this.total = resp.data.data.total;
							this.findParam.indexPage = resp.data.data.indexPage;

						}

					})
			},
			changePage(page) {
				this.findParam.indexPage = page;
				this.ListPropGroup();
			},
			changePageSize(size) {
				this.findParam.pageSize = size;
				this.ListPropGroup();
			},


		},
		created() {
			this.ListPropGroup();

		}
	}
</script>

<style scoped>

</style>
